<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="f" %>
<html>
<head>           
<script type="text/javascript" src="/three/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/three/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/three/static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="/three/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--footer 作为公共模版分离出去-->
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/three/lib/My97DatePicker/4.8/WdatePicker.js"></script> 
<script type="text/javascript" src="/three/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="/three/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/three/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type ="text/javascript" src="/three/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="/three/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="/three/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="/three/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>基本设置</title>
</head>
<script type="text/javascript">
   $(function(){
	   $('.table-sort').dataTable({
			"aaSorting": [[ 1, "desc" ]],//默认第几个排序
			"bStateSave": true,//状态保存
			"pading":false,
			"aoColumnDefs": [
			  {"orderable":false,"aTargets":[0,1]}// 不参与排序的列
			]
		});
	   $(".tr1").on("click",function(){		  
		   if($(this).children().children().prop("checked")==true){
			   $(this).children().children().prop("checked",false);
		   }else{
			   $(this).children().children().prop("checked",true);
		   }	
	    })
   })
   function dataDel(){
	   var configId="";
	   var check=$("input:checked");
	    for(var i=0;i<check.length;i++){
	    	configId+=check[i].value+",";
	    }
	   if(configId.length==0){
		   layer.open({
			   skin: 'demo-class',
			   title: '温馨提示',
			   area: ['200px', '150px'],
			   content: '请选择您要删除的颜值信息！'
			 });
	   }else{
		   layer.confirm('您确定要删除所选择的颜值信息吗?', function(index) {
			   window.location.href="/three/Config/DelConfig?configId="+configId+"";
				layer.msg('删除成功!', {
					icon : 1,
					time : 1000
				});
			});
	   }
   }
   function savaConfig(){
	   $("#buyNum").val("1");
	   $("#giveNum").val("1");
	   $("#remark").val("");
	   $("#configId").val("");
	   $("#hidd").val("sava");
	   $("#myModal").modal('show');
   }
   function dataSava(){
	   if($("#hidd").val()=="sava"){
		   $("#form1").attr("action","/three/Config/SavaConfig");
		   $("#form1").submit();
	   }
	   if($("#hidd").val()=="edit"){
		   $("#form1").attr("action","/three/Config/EditConfig");
	       $("#form1").submit();
       }
   }
   function dataEdit(){
	   var configId="";
	   var check=$("input:checked");
	    for(var i=0;i<check.length;i++){
	    	configId+=check[i].value+",";
	    }
	   if(configId.length==0){
		   layer.open({
			   skin: 'demo-class',
			   title: '温馨提示',
			   area: ['200px', '150px'],
			   content: '请选择您要编辑的颜值信息！'
			 });
	   }else if(configId.substring(0, configId.length-1).indexOf(",")>-1){
		   layer.open({
			   skin: 'demo-class',
			   title: '温馨提示',
			   area: ['200px', '150px'],
			   content: '对不起,一次只能编辑一个颜值信息！'
		   });
	   }else{
		   var buyNum=$("input:checked").parent().siblings(":eq(1)").html();
		   var giveNum=$("input:checked").parent().siblings(":eq(2)").html();
		   var remark=$("input:checked").parent().siblings(":eq(5)").html();
		   configId=configId.substring(0, configId.length-1);
		   $("#buyNum").val(buyNum);
		   $("#giveNum").val(giveNum);
		   $("#remark").val(remark);
		   $("#configId").val(configId);
		   $("#hidd").val("edit");
		   $("#myModal").modal('show');
	   }
   }
   function dataQuery(){
	   $("#money").val($("#yanzhi").val());
	   $("#youxiao").val($("#youtime").val());
	   $("#myModal2").modal('show');
   }
   function add(){
	   var money=$("#money").val();
	   var validDate=$("#youxiao").val();
	   $("#form2").attr("active","/three/Config/queryConfig");
	   $("#form2").submit();
	   $("#myModal2").modal('hide');
   }
</script>
<body style="margin:5px">
<!-- Modal 01 state -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="background-color: red;">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel"><b><font color="blue">更新颜值</font></b></h4>
      </div>
      <div class="modal-body">
      <form action="" method="post" id="form1">
         <table class="table table-striped" style="width: 560px;border-color: red;height: 180px;" border="1">
        <tbody>
        <tr>
            <td width="100px"><b>购买数量:</b></td>
            <td><input type="number" oninput="this.value=this.value.replace(/^[0]+[0-9]*$/gi,'')" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" name="buyNum" id="buyNum" min="1" placeholder="请输入购买数量" style="width:250px" class="input-text radius"></td>
          </tr>
          <tr>
            <td width="100px"><b>赠送数量:</b></td>
            <td id="t1"><input type="number" oninput="this.value=this.value.replace(/^[0]+[0-9]*$/gi,'')" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" name="giveNum" id="giveNum" min="1" placeholder="请输入赠送数量" style="width:250px" class="input-text radius"></td>
          </tr>
          <tr>
            <td width="100px"><b>备注:</b></td>
            <td id="t2">  
            <textarea name="remark" id="remark" placeholder="请输入备注" class="textarea radius" rows="5px" cols="50px"></textarea>
            <input type="hidden" id="hidd" value="">
            <input type="hidden" name="configId" id="configId" value="">
            </td>
          </tr>
        </tbody>
         </table>
      </form>
      </div>
      <div class="modal-footer">
        <div align="center">   
            <a onclick="dataSava()" class="btn btn-success radius"><i class="Hui-iconfont">&#xe615;</i> 保存</a>
            <a class="btn btn-danger radius" data-dismiss="modal"><i class="Hui-iconfont">&#xe706;</i> 取消</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal 01 end -->
<!-- Modal 02 state -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header" style="background-color: red;">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel"><b><font color="blue">颜值配置</font></b></h4>
      </div>
      <div class="modal-body">
      <form action="" method="post" id="form2">
         <table class="table table-striped" style="width: 560px;border-color: red;height: 130px;" border="1">
        <tbody>
        <tr>
            <td width="100px"><b>一元人民币可兑换:</b></td>
            <td><input type="number" oninput="this.value=this.value.replace(/^[0]+[0-9]*$/gi,'')" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" id="money" name="money" min="1" style="width:250px" class="input-text radius" value=""><b>个颜值</b></td>
          </tr>
          <tr>
            <td width="100px"><b>颜值有效期:</b></td>
            <td id="t1"><input type="number" oninput="this.value=this.value.replace(/^[0]+[0-9]*$/gi,'')" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" id="youxiao" min="1" name="validDate" style="width:250px" class="input-text radius" value=""><b>天</b></td>
          </tr>
        </tbody>
         </table>
      </form>
      </div>
      <div class="modal-footer">
        <div align="center">   
            <a onclick="add()" class="btn btn-success radius"><i class="Hui-iconfont">&#xe615;</i> 保存</a>
            <a class="btn btn-danger radius" data-dismiss="modal"><i class="Hui-iconfont">&#xe706;</i> 取消</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="page-container">
	<div class="text-c">
		<b>一元人民币可兑换:</b><input type="text" class="input-text" id="yanzhi" style="width:120px" readonly="readonly" value="${money }"><b>个颜值</b>&nbsp;&nbsp;&nbsp;
		<b>颜值有效期:</b><input type="text" class="input-text" id="youtime" style="width:120px" readonly="readonly" value="${validDate }"><b>天</b>
	</div>
	<div class="cl pd-5 bg-1 bk-gray mt-20">
		<span class="l">
		<a class="btn btn-primary radius" onclick="savaConfig()"><i class="Hui-iconfont">&#xe600;</i> 添加</a>
		<a href="javascript:;" onclick="dataDel()" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 删除</a>
		<a href="javascript:;" onclick="dataEdit()" class="btn btn-warning radius"><i class="Hui-iconfont">&#xe6df;</i> 编辑</a>
		<a href="javascript:;" onclick="dataQuery()" class="btn btn-secondary radius"><i class="Hui-iconfont">&#xe61d;</i> 颜值配置</a>
    	</span>
		<span class="r">共有数据：<strong>${configList.size()}</strong> 条</span>
	</div>
	<div class="mt-20">
		<table class="table table-border table-bordered table-hover table-bg table-sort">
			<thead>
				<tr class="text-c">
				    <th>选择</th>
					<th width="80">配置编号</th>
					<th width="80">购买数量</th>
					<th>赠送数量</th>
					<th>创建时间</th>
					<th>更新时间</th>
					<th>备注</th>
				</tr>
			</thead>
			<tbody>
			   <c:forEach items="${configList }" var="config">
				<tr class="tr1">
					<td style="text-align: center;"><input type="checkbox" value="${config.configId }"/></td>
					<td style="text-align: center;">${config.configId }</td>
					<td style="text-align: center;">${config.buyNum }</td>
					<td style="text-align: center;">${config.giveNum }</td>
					<td style="text-align: center;"><f:formatDate value="${config.createTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
					<td style="text-align: center;"><f:formatDate value="${config.modifyTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
					<td style="text-align: center;">${config.remark }</td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>
</div>
 </body>
</html>